<template>
  <div>
    <el-card shadow="never" style="margin: 30px">
      <div slot="header">
        <span>模糊查询</span>
      </div>
      <el-row :gutter="24">
        <el-form
          :model="seach"
          ref="form"
          label-width="80px"
          :inline="false"
          size="normal"
        >
          <el-col :span="6" :offset="0">
            <el-form-item label="标题">
              <el-input
                v-model="seach.title"
                placeholder="请输入标题"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="0">
            <el-form-item label="作者">
              <el-input
                v-model="seach.author"
                placeholder="请输入作者"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" :offset="16">
            <el-form-item>
              <el-button type="primary" @click="onSubmit">立即查询</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </el-card>
    <el-card shadow="never" style="margin: 30px">
      <div slot="header">
        <el-button type="primary" size="default" @click="goAdd"
          >新增图文</el-button
        >
      </div>
      <el-table :data="newslist" border stripe>
        <el-table-column
          fixed
          label="序号"
          type="index"
          width="50"
        ></el-table-column>
        <el-table-column prop="title" label="标题" width="100">
        </el-table-column>
        <el-table-column prop="author" label="作者" width="100">
        </el-table-column>
        <el-table-column prop="zanCount" label="赞" width="100">
        </el-table-column>
        <el-table-column prop="viewCount" label="浏览量" width="100">
        </el-table-column>
        <el-table-column prop="desc" label="内容描述" width="200">
        </el-table-column>
        <el-table-column label="最热" width="150" align="center">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.hot"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="类型" width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.type == 0 ? "富文本" : "markdown" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="封面图" width="200" align="center">
          <template slot-scope="scope">
            <img class="img1" :src="scope.row.cover" alt="" />
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100" align="center">
          <template slot-scope="scope">
            <el-button
              @click="handleClick(scope.row.id)"
              type="text"
              size="small"
              >删除</el-button
            >
            <el-button type="text" size="small" @click="goEdit(scope.row.id)"
              >编辑图文</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="Page.start"
        :page-sizes="Page.sizes"
        :page-size="Page.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="Page.totalCount"
        style="text-align: right; margin-top: 30px"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import NewsApi from "@/api/news/news";
import _ from "lodash";
export default {
  name: "news",
  data() {
    return {
      seach: {},
      Page: {
        start: 1,
        limit: 10,
        sizes: [10, 20, 30, 40],
        totalCount: 0,
      },
      newslist: [],
    };
  },
  created() {
    this.getnewslist();
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.Page.limit = val;
      this.getnewslist();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.Page.start = val;
      this.getnewslist();
    },
    goAdd() {
      this.$router.push({ name: "materialAdd" });
    },
    goEdit(id) {
      this.$router.push({ name: "materialEdit", params: { id } });
    },
    onSubmit() {
      this.getnewslist();
    },
    handleClick(id) {
      NewsApi.newsdel({ id }).then((res) => {
        if (res.code == "success") {
          this.getnewslist();
          this.$message("删除成功");
        }
      });
    },
    getnewslist() {
      var params = {
        start: this.Page.start,
        limit: this.Page.limit,
        title: this.seach.title,
        author: this.seach.author,
      };
      params = _.pickBy(params, (item) => item);
      NewsApi.newslist(params).then((res) => {
        console.log(res);
        for (var i = 0; i < res.data.list.length; i++) {
          if (res.data.list[i].hot == 0) {
            res.data.list[i].hot = false;
          } else {
            res.data.list[i].hot = true;
          }
        }

        this.newslist = res.data.list;
        this.Page.totalCount = res.data.totalRow;
        console.log(this.newslist);
      });
    },
  },
};
</script>
<style scoped  lang='scss'>
.img1 {
  width: 100px;
  height: 100px;
}
</style>